import {Action, getModule, Module, Mutation, VuexModule} from 'vuex-module-decorators'
import store from "@/core/store/store";
import {defaultSetting} from "@/core/setting/DefaultSetting";

export interface SettingsState {
    //
    primaryColor: any
    navTheme: any
    layout: any
    contentWidth: any
    fixedHeader: any
    fixSiderbar: any
    autoHideHeader: any
    colorWeak: any
    multiTab: any
    production: any
    device: any
    sidebar: any
    language: any
    //全局加载框
    loadingText: any
    loading: any
}

@Module({dynamic: true, store, name: 'settings'})
class Settings extends VuexModule implements SettingsState {
    public primaryColor: any = defaultSetting.primaryColor;
    public navTheme: any = defaultSetting.navTheme;
    public layout: any = defaultSetting.layout;
    public contentWidth: any = defaultSetting.contentWidth;
    public fixedHeader: any = defaultSetting.fixedHeader;
    public fixSiderbar: any = defaultSetting.fixSiderbar;
    public autoHideHeader: any = defaultSetting.autoHideHeader;
    public colorWeak: any = defaultSetting.colorWeak;
    public multiTab: any = defaultSetting.multiTab;
    public production: any = defaultSetting.production;
    public device: any = 'desktop';
    public sidebar: any = true;
    public language: any = 'zhCN';
    public loadingText: any = 'Loading...';
    public loading: any = false;


    @Mutation
    private CHANGE(payload: { key: string, value: any }) {
        const {key, value} = payload;
        if (Object.prototype.hasOwnProperty.call(this, key)) {
            (this as any)[key] = value
        }
    }

    @Action
    public change(payload: { key: string, value: any }) {
        this.CHANGE(payload)
    }
}

export const SettingsModule = getModule(Settings);
